<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Springboot实战Thymeleaf案例</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"></link>
    <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.js"></script>
    <style type="text/css">
        .top{
            text-align: center;
            background: burlywood;
            font-size: 30px;
        }
        tr{
            text-align: center;
        }
        .highLight{
            background-color: chocolate;
        }
        .myStyle{
            color: red;
            font-weight: bold;
        }
    </style>
    <script>
        $(function (){
            $("#search").click(function (){
                location.href = "index?keywords="+$("input[name=keywords]").val();
                $("input[name=keywords]").val($("input[name=keywords]").val());
            })
        })
    </script>
</head>
<body>

<!--<div th:insert="common::header"></div>-->
<div th:insert="common.html" ></div>

<div class="container">
    <div class="row"><p class="lead"><h4><a th:href="#{index.href}">首页</a>&nbsp;/&nbsp;实战案例&nbsp;/&nbsp;Thymeleaf模板引擎实战</h4></p></div>
    <div class="row"><h3 class="text-center" th:text="#{index.title}"></h3></div>
    <div class="row">
        <div class="col-md-4">
            <p class="text-right">
                <input type="text" name="keywords" th:value="${param.keywords}" class="form-control" placeholder="请输入要查询的员工">
            </p>
        </div>
        <div class="col-md-1">
            <p class="text-left"><button class="btn btn-primary" id="search">搜索</button></p>
        </div>
    </div>
    <div class="row table-responsive" >
        <table class="table table-bordered table-hover">
            <tr>
                <td>序号</td>
                <td>员工编号</td>
                <td>姓名</td>
                <td>部门</td>
                <td>岗位</td>
                <td>入司时间</td>
                <td>工资</td>
                <td>奖金</td>
                <td>&nbsp;</td>
            </tr>

           <tr th:each="emp,empStat:${empList}">
                <td th:text="${empStat.count}"></td>
                <td th:text="${emp.empno}"></td>
<!--                <td th:text="${emp.name}"></td>-->
                <td th:text="${#strings.toLowerCase(emp.name)}"></td>
                <td th:switch="${emp.deptname}">
                    <span th:case="'ACCOUNTING'">财务部</span>
                    <span th:case="'RESEARCH'">调研部</span>
                    <span th:case="'SALES'">销售部</span>
                </td>
                <td th:text="${emp.job}" th:class="${emp.job == 'MANAGER' || emp.job == 'PRESIDENT' ? 'myStyle':''}"></td>

<!--                <td th:text="${emp.hireDate}"></td>-->
                <td th:text="${#dates.format(emp.hireDate, 'yyyy年MM月dd日')}"></td>

<!--                <td th:text="${emp.salary}"></td>-->
                <td th:text="${#numbers.formatCurrency(emp.salary)}"></td>

                <td th:text="${emp.comm == null?'N/A':emp.comm}"></td>
<!--                <td th:if="${emp.comm} == null">N/A</td>-->

               <td>
                    <button class="btn btn-primary btn-xs">详情</button>
                    <button class="btn btn-warning btn-xs">删除</button>
                </td>
            </tr>

        </table>
    </div>
</div>
</body>
</html>